<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目介绍 - 炼焦大数据智能诊断系统</title>
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/page.css">
    <link rel="stylesheet" href="../styles/animate.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../scripts/jquery.min.js"></script>
    <script src="../scripts/main.js" defer></script>
</head>
<body class="page-transition">
    <header>
        <div class="container">
            <div>
                <h1><i class="fas fa-chart-line"></i>炼焦大数据智能诊断系统</h1>
                <div class="subtitle">数据分析工作平台</div>
            </div>
            <div class="quick-tools">
                <div class="tool-search">
                    <input type="text" class="search-input" placeholder="搜索...">
                    <button class="tool-btn"><i class="fas fa-search"></i></button>
                </div>
                <button class="tool-btn"><i class="fas fa-bell"></i></button>
                <button class="tool-btn"><i class="fas fa-cog"></i></button>
                <button class="tool-btn"><i class="fas fa-user"></i></button>
            </div>
        </div>
    </header>

    <nav>
        <div class="container">
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="intro.html" class="active"><i class="fas fa-info-circle"></i> 项目介绍</a></li>
                <li><a href="data_prep.html"><i class="fas fa-database"></i> 数据准备</a></li>
                <li><a href="eda.html"><i class="fas fa-chart-bar"></i> 探索性分析</a></li>
                <li><a href="modeling.html"><i class="fas fa-brain"></i> 模型开发</a></li>
                <li><a href="advanced.html"><i class="fas fa-rocket"></i> 高级分析</a></li>
                <li><a href="model.html"><i class="fas fa-fire"></i> 单孔分析模型</a></li>
                <li><a href="timeline.html"><i class="fas fa-clock"></i> 项目时间线</a></li>
            </ul>
            <button class="nav-toggle" id="navToggle">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </nav>

    <div class="page-header project-intro">
        <div class="page-header-bg"></div>
        <div class="container">
            <div class="page-header-content text-center">
                <h2 class="page-title fade-in">项目介绍</h2>
                <p class="page-description fade-in delay-1">
                    炼焦大数据智能诊断系统是一个基于大数据和人工智能技术的综合性解决方案，旨在提升炼焦生产效率、质量和能源利用率，降低生产成本并减少环境影响。
                </p>
                <div class="page-action fade-in delay-2">
                    <a href="#project-overview" class="btn btn-outline">了解更多</a>
                    <a href="model_intro.html" class="btn btn-primary">查看详细学术介绍</a>
                </div>
            </div>
        </div>
    </div>

    <main class="page-content">
        <section id="project-overview">
            <div class="container">
                <div class="content-card fade-in">
                    <h3>项目概述</h3>
                    <div class="row">
                        <div class="col-md-7">
                            <p>炼焦大数据智能诊断系统是一个集数据采集、预处理、分析和预测于一体的智能化平台，旨在通过大数据分析和人工智能技术赋能传统炼焦工业，实现智能化转型。系统依托于对海量生产数据的深入挖掘和分析，提供全方位的生产过程监控与优化方案。</p>
                            <p>本系统的核心目标是帮助炼焦企业解决生产过程中的关键挑战，包括能源消耗高、质量波动大、生产效率低等问题，为企业实现降本增效和绿色发展提供强有力的技术支撑。</p>
                        </div>
                        <div class="col-md-5">
                            <div class="chart-container">
                                <img src="../images/图片1.svg" alt="系统概览" class="chart-img">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-card fade-in delay-1">
                    <h3>项目背景</h3>
                    <p>炼焦行业作为钢铁生产的重要上游环节，对原料煤的高效利用、焦炭质量的稳定控制和环保达标至关重要。传统的炼焦生产主要依靠人工经验和简单的设备参数监控，难以应对日益复杂的生产需求和严格的环保要求。</p>
                    
                    <div class="info-panel">
                        <div class="info-panel-content">
                            <h3>行业挑战</h3>
                            <ul>
                                <li>煤质波动大，对生产参数调整要求高</li>
                                <li>焦炭质量控制难度大，影响下游钢铁生产</li>
                                <li>能源消耗高，环保压力大</li>
                                <li>传统经验管理难以应对复杂工况</li>
                                <li>数据孤岛问题严重，数据价值未被充分挖掘</li>
                            </ul>
                        </div>
                        <div class="info-panel-image" style="background-image: url('../images/图片3.svg');"></div>
                    </div>
                    
                    <p>在这一背景下，炼焦大数据智能诊断系统应运而生，旨在通过数字化转型提升炼焦生产的智能化水平，实现从"经验驱动"到"数据驱动"的管理模式转变。</p>
                </div>
                
                <div class="content-card fade-in delay-2">
                    <h3>系统架构</h3>
                    <p>炼焦大数据智能诊断系统采用分层架构设计，包括数据采集层、数据存储层、数据处理层、模型层、应用层和界面层。各层之间通过标准接口进行通信，确保系统的高度模块化和可扩展性。</p>
                    
                    <div class="process-steps">
                        <div class="process-step">
                            <div class="step-number">1</div>
                            <h4>数据采集层</h4>
                            <p>负责从DCS、MES、LIMS等系统采集生产数据，同时整合物联网设备的实时数据。</p>
                        </div>
                        <div class="process-step">
                            <div class="step-number">2</div>
                            <h4>数据存储层</h4>
                            <p>采用分布式存储架构，支持结构化和非结构化数据的高效存储与检索。</p>
                        </div>
                        <div class="process-step">
                            <div class="step-number">3</div>
                            <h4>数据处理层</h4>
                            <p>完成数据清洗、特征工程和数据融合等预处理工作，为建模分析提供高质量数据。</p>
                        </div>
                        <div class="process-step">
                            <div class="step-number">4</div>
                            <h4>模型层</h4>
                            <p>基于机器学习和深度学习技术，构建预测、分类、聚类和优化等多种模型。</p>
                        </div>
                        <div class="process-step">
                            <div class="step-number">5</div>
                            <h4>应用层</h4>
                            <p>提供参数优化、质量预测、异常诊断和决策支持等核心功能模块。</p>
                        </div>
                    </div>
                </div>
                
                <div class="content-card fade-in delay-3">
                    <h3>核心功能</h3>
                    
                    <div class="data-cards">
                        <div class="data-card">
                            <div class="data-card-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <h4>生产过程监控</h4>
                            <p>实时监控炼焦过程关键参数，多维度可视化展示生产状态</p>
                        </div>
                        <div class="data-card">
                            <div class="data-card-icon">
                                <i class="fas fa-search"></i>
                            </div>
                            <h4>质量分析与预测</h4>
                            <p>预测焦炭CSR、CRI等关键指标，提前感知质量波动</p>
                        </div>
                        <div class="data-card">
                            <div class="data-card-icon">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <h4>异常诊断与预警</h4>
                            <p>基于多模型协同，识别生产异常并追溯根因</p>
                        </div>
                        <div class="data-card">
                            <div class="data-card-icon">
                                <i class="fas fa-sliders-h"></i>
                            </div>
                            <h4>参数优化与推荐</h4>
                            <p>根据生产目标和约束条件，推荐最优工艺参数</p>
                        </div>
                        <div class="data-card">
                            <div class="data-card-icon">
                                <i class="fas fa-fire"></i>
                            </div>
                            <h4>单孔分析与优化</h4>
                            <p>针对单个炭化室进行精细化分析与优化控制</p>
                        </div>
                        <div class="data-card">
                            <div class="data-card-icon">
                                <i class="fas fa-lightbulb"></i>
                            </div>
                            <h4>智能决策支持</h4>
                            <p>提供基于数据驱动的决策建议，辅助生产管理</p>
                        </div>
                    </div>
                </div>
                
                <div class="content-card fade-in delay-3">
                    <h3>预期效益</h3>
                    <div class="benefits-container">
                        <div class="benefit-item">
                            <h4>能源消耗降低</h4>
                            <div class="benefit-image">
                                <img src="../images/energy_consumption.svg" alt="能源消耗优化效果" class="img-fluid">
                            </div>
                        </div>
                        <div class="benefit-item">
                            <h4>质量提升效果</h4>
                            <div class="benefit-image">
                                <img src="../images/quality_improvement.svg" alt="质量提升效果" class="img-fluid">
                            </div>
                        </div>
                    </div>
                    
                    <p>炼焦大数据智能诊断系统的实施预期将为企业带来显著的经济和社会效益：</p>
                    <ul>
                        <li>通过优化生产参数，能源消耗降低约10-15%</li>
                        <li>焦炭质量一致性提升，关键指标达标率提高8-12%</li>
                        <li>生产效率提升15-20%，减少非计划停机时间</li>
                        <li>环保排放达标率提高，减少环境影响</li>
                        <li>数字化转型升级，提升企业核心竞争力</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 主要内容部分 - 添加动态背景 -->
        <section class="dynamic-bg-section">
            <div class="section-content">
                <h1 class="intro-title">炼焦大数据智能诊断系统</h1>
                <p class="intro-description">
                    炼焦大数据智能诊断系统是一个基于大数据和人工智能技术的综合性解决方案，旨在提升炼焦生产效率、质量和能源利用率，降低生产成本并减少环境影响。通过集成多源数据，构建智能分析模型，为炼焦生产过程提供全方位的诊断和优化建议。
                </p>
                
                <div class="feature-cards">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h3>数据集成与分析</h3>
                        <p>整合DCS、MES、LIMS等多源异构数据，构建统一的数据模型，提供全面的数据视图和深入分析。</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <h3>智能预测与诊断</h3>
                        <p>基于机器学习和深度学习算法，实现焦炭质量预测、设备故障预警和工艺参数优化。</p>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-cogs"></i>
                        </div>
                        <h3>工艺优化与控制</h3>
                        <p>通过工艺参数关联分析和多目标优化，提供精准的工艺控制建议，实现质量稳定和能源节约。</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h3><i class="fas fa-chart-line"></i> 炼焦大数据智能诊断系统</h3>
                    <p>数据驱动 · 智能决策 · 持续优化</p>
                </div>
                <div class="footer-links">
                    <div class="footer-links-group">
                        <h4>快速链接</h4>
                        <ul>
                            <li><a href="../index.html">首页</a></li>
                            <li><a href="intro.html">项目介绍</a></li>
                            <li><a href="data_prep.html">数据准备</a></li>
                            <li><a href="eda.html">探索性分析</a></li>
                            <li><a href="modeling.html">模型开发</a></li>
                        </ul>
                    </div>
                    <div class="footer-links-group">
                        <h4>学术研究</h4>
                        <ul>
                            <li><a href="data_prep_intro.html">数据准备方法</a></li>
                            <li><a href="eda_intro.html">探索性分析研究</a></li>
                            <li><a href="modeling_intro.html">模型开发方法</a></li>
                            <li><a href="advanced_intro.html">高级分析技术</a></li>
                        </ul>
                    </div>
                    <div class="footer-links-group">
                        <h4>联系我们</h4>
                        <ul>
                            <li><i class="fas fa-envelope"></i> contact@coking-analytics.com</li>
                            <li><i class="fas fa-phone"></i> +86 123 4567 8910</li>
                            <li><i class="fas fa-map-marker-alt"></i> 中国·上海</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2023 炼焦大数据智能诊断系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 观察元素进入视口
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, {
                threshold: 0.1
            });
            
            // 为所有fade-in元素添加观察
            document.querySelectorAll('.fade-in').forEach(element => {
                observer.observe(element);
            });
        });
    </script>

    <style>
        .benefits-container {
            display: flex;
            gap: 30px;
            margin: 30px 0;
        }
        
        .benefit-item {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
            text-align: center;
        }
        
        .benefit-item h4 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: #1a3b6d;
        }
        
        .benefit-image {
            height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .benefit-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 8px;
        }
        
        @media (max-width: 768px) {
            .benefits-container {
                flex-direction: column;
            }
        }

        /* 动态背景效果 */
        .dynamic-bg-section {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
            padding: 60px 0;
            animation: bgPulse 15s infinite alternate;
        }
        
        .dynamic-bg-section:before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.5%),
                        radial-gradient(circle, rgba(255,255,255,0.4) 5%, transparent 5.5%);
            background-size: 50px 50px;
            opacity: 0.4;
            animation: bgMove 30s linear infinite;
        }
        
        @keyframes bgPulse {
            0% {
                background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
            }
            100% {
                background: linear-gradient(135deg, #e9edf5 0%, #d8dbe1 100%);
            }
        }
        
        @keyframes bgMove {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(50px, 50px);
            }
        }
        
        .section-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .intro-title {
            color: #0a2463;
            font-size: 2.5rem;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .intro-description {
            color: #333;
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 40px;
            text-align: center;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .feature-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        
        .feature-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            padding: 30px;
            transition: all 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 20px;
        }
        
        .feature-card h3 {
            color: #0a2463;
            font-size: 1.3rem;
            margin-bottom: 15px;
        }
        
        .feature-card p {
            color: #666;
            line-height: 1.7;
        }

        /* 修改项目介绍部分的背景为深蓝色渐变 */
        .project-intro {
            position: relative;
            background: linear-gradient(135deg, #0a2463 0%, #1e3a8a 50%, #1e40af 100%);
            color: white;
            padding: 80px 0;
            overflow: hidden;
        }
        
        .page-header-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 0.5;
            z-index: 1;
        }
        
        .project-intro .container {
            position: relative;
            z-index: 2;
        }
        
        .project-intro .page-title {
            color: white;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        
        .project-intro .page-description {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 2rem;
        }
        
        .project-intro .btn-outline {
            border-color: white;
            color: white;
        }
        
        .project-intro .btn-outline:hover {
            background-color: white;
            color: #1e3a8a;
        }
    </style>
</body>
</html> 